<template>
  <div class="resume_header">
    <span>已申请的岗位</span>
    <!-- <el-button type="primary" class="addJob_btn" @click="handleAdd()">添加岗位</el-button> -->
  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)" style="width: 100%" height="400px" size="large">

        <el-table-column label="岗位">
          <template #default="scope">
              <router-link :to="{path:'/postionInfoPage',query:{jobId:scope.row.jobId}}">
                {{scope.row.jobName}}
             </router-link>
          </template>
          
        </el-table-column>
        <el-table-column label="公司"  >
          <template #default="scope">
              <router-link :to="{path:'/eInfoPage',query:{eId:scope.row.eId}}">
                {{scope.row.eName}}
             </router-link>
          </template>
        </el-table-column>
        <el-table-column label="申请状态"  >
          <template #default="scope">
            {{scope.row.applyState}}
          </template>
          
        </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>

  </div>

</template>
<script lang='ts' setup>

import {getUserApplyJobs} from "@/api/userApi"
import {data,elmessage} from "@/hook/hook"
import { computed, ref, onMounted, reactive, watch, isProxy, toRef, toRefs,onBeforeMount } from 'vue'
import { useStore } from "vuex"
import { useRouter } from "vue-router"
const store = useStore()
const router = useRouter()


// 表格数据定义

interface ApplyJob {
  jobId: string
  jobName: string
  eId: string
  eName: string
  applyState:string
}
const tableData: ApplyJob[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      // 通过岗位名称筛选
      // data.name.toLowerCase().includes(search.value.toLowerCase())
      data.jobName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)


// 分页器
const page = ref(1)
const pagesizes=ref([1,2,3,4,10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  // pushTableData()
  limit.value=val
  page.value=1

}
const handleCurrentChange = (val: number) => {
  page.value=val
  // pushTableData()
}

const init=async ()=>{
 await getUserApplyJobs(data()).then(async (res:any)=>{
    console.log(res.data);
    if (res.data["code"]="200"){
      res.data.datas.forEach((value:any,index:any,self:any)=>{
        tableData.push(value)
      })
    }else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    }else{
      console.log(res.data);
      
    }
  })
}

onBeforeMount(async () => {
  await init()
  // pushTableData()

})


</script>
<style scoped>
.pagination{
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}


.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

a {
  text-decoration: none;
  color: #000;
}
</style>